<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 我的钱包 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->

<template>
	<view class="container" :style="{'--theme-color': themeColor}" v-if="loadEnd">
		<view class="container-details">
			<view class="details-top flex flex-between-center">
				<view class="top-title">总收益(元)</view>
				<view class="top-btn" @click="toDetails()">收支明细</view>
			</view>
			<view class="details-center">{{balanceInfo.total_income}}</view>
			<view class="details-bottom flex align-items-center">
				<view class="bottom-group flex align-items-center">
					<text class="group-title">待提现</text>
					<text class="group-value">{{parseFloat(balanceInfo.pending_withdrawal || 0).toFixed(2)}}</text>
				</view>
				<view class="bottom-line">|</view>
				<view class="bottom-group flex align-items-center">
					<text class="group-title">提现中</text>
					<text class="group-value">{{parseFloat(balanceInfo.progress_withdrawn || 0).toFixed(2)}}</text>
				</view>
				<view class="bottom-line">|</view>
				<view class="bottom-group flex align-items-center">
					<text class="group-title">已提现</text>
					<text class="group-value">{{parseFloat(balanceInfo.already_withdrawn || 0).toFixed(2)}}</text>
				</view>
			</view>
		</view>
		<block v-if="walletConfig.withdrawal_method != 2">
			<view class="container-info flex align-items-start" v-if="selectBankCard && selectBankCard.id">
				<view class="info-box flex-item">
					<view class="box-name flex flex-wrap">
						<text class="text text-ellipsis">{{selectBankCard.name}}</text>
						<text class="text text-ellipsis">{{selectBankCard.bank_name}}</text>
					</view>
					<view class="box-number">{{selectBankCard.bank_card_number}}</view>
				</view>
				<view class="info-btn" @click="toBankCard()">管理银行卡</view>
			</view>
			<view class="container-info flex flex-center" @click="toBankCard()" v-else>
				<view class="info-btn">管理银行卡</view>
			</view>
		</block>
		<view class="container-main">
			<view class="main-title">提现金额</view>
			<view class="main-input flex align-items-center">
				<text class="unit">￥</text>
				<input class="input flex-item" v-model="withdrawalAmount" type="digit" :placeholder="`最低${Number(walletConfig.min_withdrawal_amount || 0)}元起提现`" placeholder-class="placeholder" />
			</view>
			<view class="main-group">
				<view class="group-btn plain" @click="toExamine()">提现审核记录</view>
				<view class="group-btn" @click="handleWithdrawal()">立即提现</view>
			</view>
			<view class="main-tips" v-if="walletConfig.once_more_hours">据上次申请提现后<text class="text">{{walletConfig.once_more_hours || 0}}</text>可再次提现</view>
		</view>
		<view class="container-tips">
			<view class="tips-bg"></view>
			<view class="tips-box flex-column">
				<view class="box-title">温馨提示：</view>
				<view class="box-content">
					<view class="text">提现前请核对好您的银行卡或指定账户信息。</view>
					<view class="text">提现过程中，请务必遵循我们的操作流程，确保信息填写准确无误。</view>
					<view class="text">提现申请提交后，请耐心等待，我们会在最短时间内为您处理。</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		data() {
			return {
				// 加载完成
				loadEnd: false,
				// 余额信息
				balanceInfo: {},
				// 钱包配置
				walletConfig: {},
				// 已选择银行卡
				selectBankCard: {},
				// 提现金额
				withdrawalAmount: "",
			}
		},
		computed: {
			...mapState({
				themeColor: state => state.app.themeColor,
			})
		},
		onLoad() {
			uni.showLoading({
				title: "加载中"
			})
			this.getDefaultBankCard()
			this.getWalletInfo(() => {
				this.loadEnd = true
				uni.hideLoading()
			})
		},
		onShow() {
			let pages = getCurrentPages()
			let nowPage = pages[pages.length - 1]
			if (nowPage.$vm.currentBankCard) {
				this.selectBankCard = nowPage.$vm.currentBankCard
				nowPage.$vm.currentBankCard = null
			} else if (this.loadEnd) {
				this.getWalletInfo()
			}
		},
		methods: {
			// 跳转银行卡管理
			toBankCard() {
				this.$util.toPage({
					mode: 1,
					path: "/pages/public/bank-card/index?select=1",
					isToken: true,
				})
			},
			// 获取默认银行卡
			getDefaultBankCard() {
				this.$util.request('main.bankCard.getDefault').then((res) => {
					if (res.code == 1) {
						this.selectBankCard = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
						})
					}
				}).catch((error) => {
					console.error('获取默认银行卡 ', error)
				})
			},
			// 获取钱包信息
			getWalletInfo(fn) {
				this.$util.request('driver.wallet.info').then((res) => {
					if (fn) fn()
					if (res.code == 1) {
						this.balanceInfo = {
							already_withdrawn: res.data.already_withdrawn,
							pending_withdrawal: res.data.pending_withdrawal,
							progress_withdrawn: res.data.progress_withdrawn,
							total_income: res.data.total_income,
						}
						this.walletConfig = {
							min_withdrawal_amount: res.data?.withdrawal_config?.min_withdrawal_amount || 0,
							once_more_hours: this.$util.hourToDay(res.data?.withdrawal_config?.once_more_hours || 0),
							withdrawal_method: res.data?.withdrawal_config?.withdrawal_method || 1,
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
						})
					}
				}).catch((error) => {
					if (fn) fn()
					console.error('获取钱包信息 ', error)
				})
			},
			// 立即提现
			handleWithdrawal() {
				if (this.walletConfig.withdrawal_method == 1 && (!this.selectBankCard || !this.selectBankCard.id)) {
					uni.showToast({
						icon: "none",
						title: "请选择银行卡",
					})
					return
				}
				if (!this.withdrawalAmount || Number(this.withdrawalAmount) == 0) {
					uni.showToast({
						icon: "none",
						title: "请输入提现金额",
					})
					return
				}
				if (Number(this.withdrawalAmount) < Number(this.walletConfig.min_withdrawal_amount)) {
					uni.showToast({
						title: `最低${Number(this.walletConfig.min_withdrawal_amount || 0)}元起提现`,
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (Number(this.withdrawalAmount) > Number(this.balanceInfo.pending_withdrawal)) {
					uni.showToast({
						title: "提现金额不能大于待提现金额",
						icon: 'none',
						duration: 2000
					})
					return
				}
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				var data = {
					amount: this.withdrawalAmount,
					withdrawal_method: this.walletConfig.withdrawal_method || 1,
				}
				if (this.walletConfig.withdrawal_method == 1) data.bank_id = this.selectBankCard.id
				this.$util.request('driver.wallet.withdrawal', data).then((res) => {
					uni.hideLoading()
					if (res.code == 1) {
						this.withdrawalAmount = ""
						this.getWalletInfo()
						if (this.walletConfig.withdrawal_method == 2) {
							uni.showModal({
								content: "您的提现正在审核中，申请通过后请前往小程序确认收款！",
								confirmText: "我知道了",
								confirmColor: this.themeColor,
								showCancel: false,
							})
						} else {
							uni.showModal({
								content: "您已提交申请，正在审核中",
								confirmText: "我知道了",
								confirmColor: this.themeColor,
								showCancel: false,
							})
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2500,
						})
					}
				}).catch((error) => {
					uni.hideLoading()
					console.error('立即提现 ', error)
				})
			},
			// 跳转收支明细
			toDetails() {
				this.$util.toPage({
					mode: 1,
					path: "/pages/driver/mine/wallet/details",
					isToken: true,
				})
			},
			// 跳转提现审核
			toExamine() {
				this.$util.toPage({
					mode: 1,
					path: "/pages/driver/mine/wallet/examine",
					isToken: true,
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 32rpx;

		.container-details {
			border-radius: 32rpx;
			background: #FFF;
			padding: 32rpx;

			.details-top {
				.top-title {
					color: #242629;
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
				}

				.top-btn {
					color: var(--theme-color);
					font-size: 24rpx;
					font-weight: 600;
					border: 1px solid var(--theme-color);
					border-radius: 24rpx;
					padding: 0 10rpx;
					min-width: 120rpx;
					height: 48rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.details-center {
				margin-top: 16rpx;
				color: #242629;
				font-size: 48rpx;
				font-weight: 600;
				line-height: 68rpx;
			}

			.details-bottom {
				margin-top: 20rpx;

				.bottom-group {
					.group-title {
						color: #8D929C;
						font-size: 24rpx;
						line-height: 34rpx;
					}

					.group-value {
						color: var(--theme-color);
						font-size: 24rpx;
						line-height: 34rpx;
						margin-left: 8rpx;
					}
				}

				.bottom-line {
					color: #8D929C;
					font-size: 24rpx;
					line-height: 34rpx;
					padding: 0 16rpx;
				}
			}
		}

		.container-info {
			margin-top: 32rpx;
			border-radius: 32rpx;
			background: #FFF;
			padding: 32rpx;
			min-height: 172rpx;

			.info-box {
				margin-right: 24rpx;

				.box-name {
					.text {
						color: #242629;
						font-size: 32rpx;
						font-weight: 600;
						line-height: 44rpx;
						margin-right: 16rpx;
						margin-bottom: 24rpx;
					}
				}

				.box-number {
					color: #242629;
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}

			.info-btn {
				color: var(--theme-color);
				font-size: 28rpx;
				line-height: 40rpx;
			}
		}

		.container-main {
			border-radius: 32rpx;
			background: #FFF;
			padding: 32rpx;
			margin-top: 32rpx;

			.main-title {
				color: #242629;
				font-size: 28rpx;
				font-weight: 600;
				line-height: 40rpx;
			}

			.main-input {
				margin-top: 32rpx;
				border-radius: 24px;
				border: 1rpx solid rgba(0, 0, 0, 0.10);
				background: #FFF;
				padding-left: 48rpx;

				.unit {
					color: #DE2828;
					font-size: 28rpx;
					line-height: 40rpx;
				}

				.input {
					padding: 26rpx 48rpx 26rpx 16rpx;
					color: #242629;
					font-size: 28rpx;
					line-height: 40rpx;
					height: auto;
				}

				.placeholder {
					color: #8D929C;
				}
			}

			.main-group {
				display: flex;
				column-gap: 16rpx;

				.group-btn {
					flex: 1;
					margin-top: 32rpx;
					color: #FFF;
					font-size: 28rpx;
					line-height: 40rpx;
					text-align: center;
					padding: 28rpx 32rpx;
					border-radius: 48rpx;
					background: var(--theme-color);
					border-radius: 24px;
					border: 2rpx solid var(--theme-color);

					&.plain {
						background: #FFF;
						color: var(--theme-color);
					}
				}
			}

			.main-tips {
				margin-top: 32rpx;
				color: #8D929C;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
				text-align: center;

				.text {
					color: var(--theme-color);
				}
			}
		}

		.container-tips {
			position: relative;
			padding: 32rpx;
			margin-top: 32rpx;
			border-radius: 16rpx;
			overflow: hidden;
			background: #FFF;

			.tips-bg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: var(--theme-color);
				opacity: .06;
			}

			.tips-box {
				position: relative;
				z-index: 1;

				.box-title {
					color: var(--theme-color);
					font-size: 24rpx;
					line-height: 34rpx;
				}

				.box-content {
					.text {
						color: var(--theme-color);
						font-size: 24rpx;
						line-height: 34rpx;
						display: flex;
						align-items: flex-start;

						&::before {
							content: "·";
							display: inline-block;
							color: var(--theme-color);
							font-size: 34rpx;
							line-height: 34rpx;
						}
					}
				}
			}
		}
	}
</style>